<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.highcharts-figure, .highcharts-data-table table {
			min-width: 310px; 
			max-width: 800px;
			margin: 1em auto;
		}
		.highcharts-data-table table {
			font-family: Verdana, sans-serif;
			border-collapse: collapse;
			border: 1px solid #EBEBEB;
			margin: 10px auto;
			text-align: center;
			width: 100%;
			max-width: 500px;
		}
		.highcharts-data-table caption {
			padding: 1em 0;
			font-size: 1.2em;
			color: #555;
		}
		.highcharts-data-table th {
			font-weight: 600;
			padding: 0.5em;
		}
		.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
			padding: 0.5em;
		}
		.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
			background: #f8f8f8;
		}
		.highcharts-data-table tr:hover {
			background: #f1f7ff;
		}

	</style>
	<script src="../../js/libs/highcharts/highcharts.js"></script>
	<script src="../../js/libs/highcharts/highcharts-more.js"></script>
	<script src="../../js/libs/highcharts/dumbbell.js"></script>
	<script src="../../js/libs/highcharts/exporting.js"></script>
	<script src="../../js/libs/highcharts/export-data.js"></script>
	<script src="../../js/libs/highcharts/accessibility.js"></script>
	<body>
		<figure class="highcharts-figure">
			<div id="container"></div>
		</figure>
		
	</body>
	
	<script>
		var data = [{
			name: 'Austria',
			low: 69,
			high: 82
		}, {
			name: 'Belgium',
			low: 70,
			high: 81
		}, {
			name: 'Bulgaria',
			low: 69,
			high: 75
		}, {
			name: 'Croatia',
			low: 65,
			high: 78
		}, {
			name: 'Cyprus',
			low: 70,
			high: 81
		}, {
			name: 'Czech Republic',
			low: 70,
			high: 79
		}, {
			name: 'Denmark',
			low: 72,
			high: 81
		}, {
			name: 'Estonia',
			low: 68,
			high: 78
		}, {
			name: 'Finland',
			low: 69,
			high: 81
		}, {
			name: 'France',
			low: 70,
			high: 83
		}, {
			name: 'Greece',
			low: 68,
			high: 81
		}, {
			name: 'Spain',
			low: 69,
			high: 83
		}, {
			name: 'Netherlands',
			low: 73,
			high: 82
		}, {
			name: 'Ireland',
			low: 70,
			high: 82
		}, {
			name: 'Lithuania',
			low: 70,
			high: 75
		}, {
			name: 'Luxembourg',
			low: 68,
			high: 83
		}, {
			name: 'Latvia',
			low: 70,
			high: 75
		}, {
			name: 'Malta',
			low: 69,
			high: 82
		}, {
			name: 'Germany',
			low: 69,
			high: 81
		}, {
			name: 'Poland',
			low: 68,
			high: 78
		}, {
			name: 'Portugal',
			low: 63,
			high: 81
		}, {
			name: 'Romania',
			low: 66,
			high: 75
		}, {
			name: 'Slovakia',
			low: 70,
			high: 77
		}, {
			name: 'Slovenia',
			low: 69,
			high: 81
		}, {
			name: 'Sweden',
			low: 73,
			high: 82
		}, {
			name: 'Hungary',
			low: 68,
			high: 76
		}, {
			name: 'Italy',
			low: 69,
			high: 83
		}, {
			name: 'UK',
			low: 71,
			high: 81
		}];
		Highcharts.chart('container', {
			chart: {
				type: 'dumbbell',
				inverted: true
			},
			legend: {
				enabled: false
			},
			subtitle: {
				text: '1960 vs 2018'
			},
			title: {
				text: '各国预期寿命变化'
			},
			tooltip: {
				shared: true
			},
			xAxis: {
				type: 'category'
			},
			yAxis: {
				title: {
					text: 'Life Expectancy (years)'
				}
			},
			series: [{
				name: '各国预期寿命变化',
				data: data
			}]
		});
		
	</script>
</html>
